<script setup>
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls'
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import {ref,onMounted} from 'vue'
let firstThree = ref()

const scene = new THREE.Scene()

const group = new THREE.Group()
scene.add(group)

let textureCube = new THREE.CubeTextureLoader()
                  .setPath("./public/Park2/")
                  .load(['posx.jpg','negx.jpg','posy.jpg','negy.jpg','posz.jpg','negz.jpg',])
textureCube.encoding = THREE.sRGBEncoding;
scene.background = textureCube;
scene.environment = textureCube;
// 设置背景模糊度
scene.backgroundBlurriness = 0.08;

// 初始化物理世界
const word = new THREE.CANNON
console.log(word)


// 聚光灯-可以投射阴影的灯
const spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(10,50,0);
spotLight.castShadow = true
spotLight.shadow.mapSize.width = window.innerWidth
spotLight.shadow.mapSize.height = window.innerHeight
spotLight.shadow.camera.near = 0.5
spotLight.shadow.camera.far = 500
spotLight.shadow.camera.fov = 30
// 此时会将三维场景中每个小模型都添加上阴影，所以要加上以下设置
spotLight.shadow.bias = -0.00008;
spotLight.intensity = 2;

// 环境光
const ambient = new THREE.AmbientLight("#fff",0.8)
scene.add(ambient)
// 平行光
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(100, 60, 50);
scene.add(directionalLight);

const width = window.innerWidth;
const height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(100,width/height,1,8000)
camera.position.set(0,40,-28)
camera.lookAt(10,5,0) 


// 解决渲染出来的图像有锯齿
const renderer = new THREE.WebGLRenderer({
  antialias:true
});
renderer.outputColorSpace = THREE.SRGBColorSpace;
renderer.setSize(width,height)
// 设置色调映射
renderer.toneMapping = THREE.ACESFilmicToneMapping
renderer.toneMappingExposure = 1;
// 设置阴影
renderer.shadowMap.enabled = true;
// 阴影类型
renderer.shadowMap.type = THREE.PCFShadowMap
function render(){
  requestAnimationFrame(render)
  renderer.render(scene,camera)
}
render()
const controls = new OrbitControls(camera,renderer.domElement)
controls.target.set(0,0,0)
controls.addEventListener("change",function(){
  renderer.render(scene,camera)
})
onMounted(()=>{
  document.getElementById("firstThree").appendChild(renderer.domElement)
})

</script>

<template>
  <div>
    <div id="firstThree" ref="firstThree"></div>
  </div>
</template>

<style scoped>
  #firstThree{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
  }
</style>
